<style>
    .div-item {
        margin-top: 30px;
    }

    .btn-item {
        display: inline-block;
        margin: 0 10px 30px 0;
    }
</style>

<!-- 正文开始 -->
<div class="layui-fluid">
    <div class="layui-card">
        <div class="layui-card-header">下拉菜单</div>
        <div class="layui-card-body text-center" style="padding: 30px 0;">
            <div class="div-item">
                <div class="btn-item">
                    <div class="dropdown-menu">
                        <button class="layui-btn icon-btn">
                            &nbsp;Click me <i class="layui-icon layui-icon-drop"></i>
                        </button>
                        <ul class="dropdown-menu-nav">
                            <li><a>1st menu item</a></li>
                            <li><a>2nd menu item</a></li>
                            <li><a>3rd menu item</a></li>
                        </ul>
                    </div>
                    <div class="dropdown-menu dropdown-hover">
                        <button class="layui-btn icon-btn">
                            &nbsp;Hover me <i class="layui-icon layui-icon-drop"></i></button>
                        <ul class="dropdown-menu-nav">
                            <li><a>1st menu item</a></li>
                            <li><a>2nd menu item</a></li>
                            <li><a>3rd menu item</a></li>
                        </ul>
                    </div>
                </div>
                <div class="btn-item">
                    <div class="dropdown-menu dropdown-hover">
                        <button class="layui-btn icon-btn">
                            &nbsp;更多样式 <i class="layui-icon layui-icon-drop"></i></button>
                        <ul class="dropdown-menu-nav">
                            <li class="title">HEADER</li>
                            <li><a><i class="layui-icon layui-icon-star-fill"></i>1st menu item</a></li>
                            <li class="disabled">
                                <a><i class="layui-icon layui-icon-template-1"></i>2nd menu item</a></li>
                            <hr>
                            <li class="title">HEADER</li>
                            <li><a><i class="layui-icon layui-icon-set-fill"></i>3rd menu item</a></li>
                        </ul>
                    </div>
                    <div class="dropdown-menu dropdown-hover">
                        <button class="layui-btn icon-btn">
                            &nbsp;带小三角 <i class="layui-icon layui-icon-drop"></i>
                        </button>
                        <ul class="dropdown-menu-nav">
                            <div class="dropdown-anchor"></div>
                            <li><a>1st menu item</a></li>
                            <li><a>2nd menu item</a></li>
                            <li><a>3rd menu item</a></li>
                        </ul>
                    </div>
                </div>
            </div>
            <div class="div-item">
                <div class="btn-item">
                    <div class="dropdown-menu dropdown-hover">
                        <input type="text" placeholder="一个会跳舞的输入框" class="layui-input"/>
                        <ul class="dropdown-menu-nav">
                            <li class="title">是不是在找</li>
                            <li><a>另一个会跳舞的下拉框</a></li>
                            <li><a>一杯忧郁的可乐</a></li>
                        </ul>
                    </div>
                    <button class="layui-btn layui-btn-normal icon-btn" data-dropdown="#dropdownExp1">
                        &nbsp;带遮罩层 <i class="layui-icon layui-icon-drop"></i></button>
                </div>
                <div class="btn-item">
                    <div class="dropdown-menu">
                        <button class="layui-btn layui-btn-normal icon-btn">
                            &nbsp;暗色主题 <i class="layui-icon layui-icon-drop"></i></button>
                        <ul class="dropdown-menu-nav dark">
                            <div class="dropdown-anchor"></div>
                            <li class="title">HEADER</li>
                            <li><a><i class="layui-icon layui-icon-star-fill"></i>1st menu item</a></li>
                            <li class="disabled">
                                <a><i class="layui-icon layui-icon-template-1"></i>2nd menu item</a></li>
                            <hr>
                            <li class="title">HEADER</li>
                            <li><a><i class="layui-icon layui-icon-set-fill"></i>3rd menu item</a></li>
                        </ul>
                    </div>
                    <div class="dropdown-menu">
                        <button class="layui-btn layui-btn-normal icon-btn">
                            &nbsp;克隆/下载 <i class="layui-icon layui-icon-drop"></i></button>
                        <div class="dropdown-menu-nav dropdown-bottom-right"
                             style="width: 280px;padding: 0 10px 10px 10px;">
                            <div class="dropdown-anchor"></div>
                            <div class="layui-tab layui-tab-brief">
                                <ul class="layui-tab-title">
                                    <li class="layui-this">HTTPS</li>
                                    <li>SSH</li>
                                </ul>
                                <div class="layui-tab-content" style="padding: 10px 0 10px 0;">
                                    <div class="layui-tab-item layui-show">
                                        <input class="layui-input" value="https://gitee.com/whvse/easyweb-jwt.git"/>
                                    </div>
                                    <div class="layui-tab-item">
                                        <input class="layui-input" value="git@gitee.com:whvse/easyweb-jwt.git"/>
                                    </div>
                                </div>
                            </div>
                            <button class="layui-btn layui-btn-sm layui-btn-fluid" style="margin-bottom: 10px;">
                                Download ZIP
                            </button>
                            <img src="http://p1.music.126.net/voV3yPduAhNATICMRJza1A==/109951164017919367.jpg"
                                 width="100%">
                        </div>
                    </div>
                </div>
            </div>
            <div class="div-item">
                <div class="btn-item">
                    <div class="dropdown-menu dropdown-hover">
                        <button class="layui-btn layui-btn-primary icon-btn">
                            <i class="layui-icon layui-icon-drop"></i> Bottom Left
                        </button>
                        <ul class="dropdown-menu-nav">
                            <div class="dropdown-anchor"></div>
                            <li><a>1st menu item</a></li>
                            <li><a>2nd menu item</a></li>
                            <li><a>3rd menu item</a></li>
                        </ul>
                    </div>
                    <div class="dropdown-menu dropdown-hover">
                        <button class="layui-btn layui-btn-primary icon-btn">
                            Bottom <i class="layui-icon layui-icon-drop"></i> Center
                        </button>
                        <ul class="dropdown-menu-nav dropdown-bottom-center">
                            <div class="dropdown-anchor"></div>
                            <li><a>1st menu item</a></li>
                            <li><a>2nd menu item</a></li>
                            <li><a>3rd menu item</a></li>
                        </ul>
                    </div>
                </div>
                <div class="btn-item">
                    <div class="dropdown-menu dropdown-hover">
                        <button class="layui-btn layui-btn-primary icon-btn">
                            Bottom Right <i class="layui-icon layui-icon-drop"></i>
                        </button>
                        <ul class="dropdown-menu-nav dropdown-bottom-right">
                            <div class="dropdown-anchor"></div>
                            <li><a>1st menu item</a></li>
                            <li><a>2nd menu item</a></li>
                            <li><a>3rd menu item</a></li>
                        </ul>
                    </div>
                    <div class="dropdown-menu dropdown-hover">
                        <button class="layui-btn layui-btn-primary icon-btn">
                            Right Center <i class="layui-icon layui-icon-drop right"></i></button>
                        <ul class="dropdown-menu-nav dropdown-right-center">
                            <div class="dropdown-anchor"></div>
                            <li><a>1st menu item</a></li>
                            <li><a>2nd menu item</a></li>
                            <li><a>3rd menu item</a></li>
                        </ul>
                    </div>
                </div>
            </div>
            <div class="div-item">
                <div class="btn-item">
                    <div class="dropdown-menu dropdown-hover">
                        <button class="layui-btn layui-btn-primary icon-btn">
                            <i class="layui-icon layui-icon-drop top"></i> Top Left
                        </button>
                        <ul class="dropdown-menu-nav dropdown-top-left">
                            <div class="dropdown-anchor"></div>
                            <li><a>1st menu item</a></li>
                            <li><a>2nd menu item</a></li>
                            <li><a>3rd menu item</a></li>
                        </ul>
                    </div>
                    <div class="dropdown-menu dropdown-hover">
                        <button class="layui-btn layui-btn-primary icon-btn">
                            Top <i class="layui-icon layui-icon-drop top"></i> Center
                        </button>
                        <ul class="dropdown-menu-nav dropdown-top-center">
                            <div class="dropdown-anchor"></div>
                            <li><a>1st menu item</a></li>
                            <li><a>2nd menu item</a></li>
                            <li><a>3rd menu item</a></li>
                        </ul>
                    </div>
                </div>
                <div class="btn-item">
                    <div class="dropdown-menu dropdown-hover">
                        <button class="layui-btn layui-btn-primary icon-btn">
                            Top Right <i class="layui-icon layui-icon-drop top"></i></button>
                        <ul class="dropdown-menu-nav dropdown-top-right">
                            <div class="dropdown-anchor"></div>
                            <li><a>1st menu item</a></li>
                            <li><a>2nd menu item</a></li>
                            <li><a>3rd menu item</a></li>
                        </ul>
                    </div>
                    <div class="dropdown-menu dropdown-hover">
                        <button class="layui-btn layui-btn-primary icon-btn">
                            <i class="layui-icon layui-icon-drop left"></i> Left Center
                        </button>
                        <ul class="dropdown-menu-nav dropdown-left-center">
                            <div class="dropdown-anchor"></div>
                            <li><a>1st menu item</a></li>
                            <li><a>2nd menu item</a></li>
                            <li><a>3rd menu item</a></li>
                        </ul>
                    </div>
                </div>
            </div>
            <p class="layui-text">查看在<a href="#/template/table/table-basic">数据表格</a>中使用示例。</p>
        </div>
    </div>
</div>
<!-- 下拉菜单 -->
<ul class="dropdown-menu-nav dropdown-bottom-right layui-hide" id="dropdownExp1">
    <div class="dropdown-anchor"></div>
    <li class="title">HEADER</li>
    <li><a><i class="layui-icon layui-icon-star-fill"></i>1st menu item</a></li>
    <li class="disabled">
        <a><i class="layui-icon layui-icon-template-1"></i>2nd menu item</a></li>
    <hr>
    <li class="title">HEADER</li>
    <li><a><i class="layui-icon layui-icon-set-fill"></i>3rd menu item</a></li>
</ul>

<!-- js部分 -->
<script>
    layui.use(['layer', 'dropdown'], function () {
        var $ = layui.jquery;
        var layer = layui.layer;
        var dropdown = layui.dropdown;

    });
</script>